<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ZRender</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ZRender">
    <meta name="author" content="kener.linfeng@gmail.com">

    <script src="../asset/js/esl/esl.js"></script>
    <link href="../asset/css/bootstrap.css" rel="stylesheet">
    <link href="../asset/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="../asset/css/zrenderHome.css" rel="stylesheet">
    <link rel="shortcut icon" href="../asset/ico/favicon.png">
</head>

<body>
    <!-- NAVBAR
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="../../index.html">ZRender</a>
          <div class="nav-collapse collapse">
              <a id="forkme_banner" href="https://github.com/ecomfe/zrender">View on GitHub</a>
              <ul class="nav">
                <li><a href="../../index.html"><i class="icon-home icon-white"></i> Home</a></li>
                <li class="active dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Example <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="demo.html">Demo</a></li>
                    <li><a href="animation.html">Animation</a></li>
                    <li><a href="chart.html">Chart</a></li>
                    <li class="active"><a href="colorSeries.html">Color Series</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="artist.html">Artist</a></li>
                    <li><a href="slice.html">slice</a></li>
                  </ul>
                </li>
                <li><a href="../api/index.html" target="_blank">API &amp; Doc</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe/zrender/archive/2.0.8.zip">ZIP (2.0.8)</a></li>
                    <li><a href="https://github.com/ecomfe/zrender/archive/master.zip">ZIP (Latest)</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
                    <li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="http://echarts.baidu.com" target="_blank">ECharts</a></li>
                  </ul>
                </li>
              </ul>
           </div><!--/.nav-collapse -->
        </div><!-- /.container -->
      </div><!-- /.navbar-inner -->
    </div><!-- /.navbar-wrapper -->

    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="main" class="main"></div>
                <button id="refresh">Refresh ~</button>
                <p id='color-series'></p>
            </div>
        </div><!--/row-->
        <hr>
        <!-- FOOTER -->
        <footer>
          <p class="pull-right"><a href="#">Back to top</a></p>
          <p>&copy; 2013 ECOM-FE &middot; <a href="https://github.com/ecomfe/zrender/blob/master/LICENSE.txt" target="_blank">Terms</a> &middot; <a href="../changelog.html" target="_blank">Changelog</a></p>
        </footer>
    </div><!--/.fluid-container-->

    <script src="../asset/js/jquery.js"></script>
    <script src="../asset/js/bootstrap-transition.js"></script>
    <script src="../asset/js/bootstrap-alert.js"></script>
    <script src="../asset/js/bootstrap-modal.js"></script>
    <script src="../asset/js/bootstrap-dropdown.js"></script>
    <script src="../asset/js/bootstrap-scrollspy.js"></script>
    <script src="../asset/js/bootstrap-tab.js"></script>
    <script src="../asset/js/bootstrap-tooltip.js"></script>
    <script src="../asset/js/bootstrap-popover.js"></script>
    <script src="../asset/js/bootstrap-button.js"></script>
    <script src="../asset/js/bootstrap-collapse.js"></script>
    <script src="../asset/js/bootstrap-carousel.js"></script>
    <script src="../asset/js/bootstrap-typeahead.js"></script>
    <script type="text/javascript">
        var developMode = false;
        if (developMode) {
            // for develop
            require.config({
                packages: [
                    {
                        name: 'zrender',
                        location: '../../src',
                        main: 'zrender'
                    }
                ]
            });
        }
        else {
            // for echarts online home page
            var fileLocation = './www/js/zrender';
            require.config({
                paths:{ 
                    zrender: fileLocation,
                    'zrender/shape/Rectangle': fileLocation
                }
            });
        }

        require(
            ['zrender', 'zrender/shape/Rectangle'],
            function(zrender, RectangleShape) {
                zr = zrender.init(document.getElementById('main'));
                var zrColor = require('zrender/tool/color');
                var max = 30;
                var width = Math.ceil(zr.getWidth());
                var height = Math.ceil(zr.getHeight());
                var w;
                var h;
                var lastY;
                var customerShape;
                var customerSeries;
                var selectedShape;
                document.getElementById('refresh').onclick = init;
                function init(){
                    zr.clear();
                    w = Math.round(width / max);
                    h = 30;
                    lastY = 0;
                    customerShape = [];
                    customerSeries = [];
                    selectedShape = {};
                    buildDefault();
                    buildCustomer();
                    buildColorSeries();

                    zr.render();
                }


                function buildDefault() {
                    for (var i = 0; i < max; i++) {
                        zr.addShape(new RectangleShape({
                            zlevel:0,
                            style : {
                                x : i * w + 1,
                                y : 0,
                                width : w,
                                height : h,
                                brushType : 'both',
                                color : zrColor.getColor(i),
                                strokeColor : '#fff'
                            }
                        }));
                    }
                }

                function buildCustomer() {
                    lastY += h + 20;
                    for (var i = 0; i < max; i++) {
                        customerShape.push(new RectangleShape({
                            zlevel:1,
                            style : {
                                x : i * w + 1,
                                y : lastY,
                                width : w,
                                height : h,
                                brushType : 'both',
                                color :'#ccc',
                                strokeColor : '#fff'
                            },
                            clickable : true,
                            onclick : deleteColor,
                            _idx : i
                        }));
                        zr.addShape(customerShape[i]);
                    }
                }

                function refreshCustomer() {
                    for (var i = 0; i < max; i++) {
                        zr.modShape(
                            customerShape[i].id,
                            {style : {color : customerSeries[i] || '#ccc'}}
                        );
                    }
                    document.getElementById('color-series').innerHTML =
                        "Selected color series : <br/>'" + customerSeries.join("', '") + "'";
                }

                function buildColorSeries() {
                    h = 34;
                    lastY += h + 20;
                    var colorSpace = [
                        ['#440000', '#444400', '#004400','#004444','#000044','#440044','#440000'],
                        ['#770000', '#777700', '#007700','#007777','#000077','#770077','#770000'],
                        ['#aa0000', '#aaaa00', '#00aa00','#00aaaa','#0000aa','#aa00aa','#aa0000'],
                        ['#dd0000', '#dddd00', '#00dd00','#00dddd','#0000dd','#dd00dd','#dd0000'],
                        ['#ff0000', '#ffff00', '#00ff00','#00ffff','#0000ff','#ff00ff','#ff0000'],
                        ['#ff7777', '#ffff77', '#77ff77','#77ffff','#7777ff','#ff77ff','#ff7777'],
                        ['#ffbbbb', '#ffffbb', '#bbffbb','#bbffff','#bbbbff','#ffbbff','#ffbbbb'],
                        ['#ffdddd', '#ffffdd', '#ddffdd','#ddffff','#ddddff','#ffddff','#ffdddd']
                    ]
                    var colorList;
                    for (var i = 0, l = colorSpace.length; i < l; i++) {
                        colorList = zrColor.getGradientColors(colorSpace[i], 10);
                        w = Math.floor(width / colorList.length) + 0.6;
                        for (var j = 0, k = colorList.length; j < k; j++) {
                            zr.addShape(new RectangleShape({
                                zlevel:2,
                                style: {
                                    x: w * j, y: lastY, width : w, height : h,
                                    color : zrColor.toHex(colorList[j]),
                                    brushType : 'both',
                                    strokeColor : '#fff'
                                },
                                clickable : true,
                                onclick : selectColor
                            }));
                        }
                        lastY += h + 1;
                    }
                }

                function deleteColor(params) {
                    var target = params.target;
                    var idx = target._idx;
                    if (idx > customerSeries.length) {
                        return;
                    }
                    zr.modShape(
                        selectedShape[idx].id,
                        {style : {brushType : 'both'}}
                    );
                    var newColorList = [];
                    for (var i = 0; i < max; i++) {
                        if (i != idx && customerSeries[i]) {
                            newColorList.push(customerSeries[i]);
                            selectedShape[newColorList.length - 1] = selectedShape[i];
                            selectedShape[newColorList.length - 1]._idx = newColorList.length - 1;
                        }
                    }
                    customerSeries = newColorList;
                    refreshCustomer();
                    zr.refresh();
                }

                function selectColor(params) {
                    var target = params.target;
                    if (target.style.brushType == 'stroke') {
                        deleteColor({
                            target : customerShape[target._idx]
                        });
                        return;
                    }
                    if (customerSeries.length >= max) {
                        return;
                    }
                    customerSeries.push(target.style.color);
                    selectedShape[customerSeries.length - 1] = target;
                    zr.modShape(
                        target.id,
                        {
                            style : {brushType : 'stroke'},
                            _idx : customerSeries.length - 1
                        }
                    );
                    refreshCustomer();
                    zr.refresh();
                }

                init();
            }
        )
    </script>
</body>
</html>